<script setup>
import { watch, ref } from 'vue'
// import router from '@renderer/router'
import { useRouter } from 'vue-router'

const router = useRouter() // 获取路由实例
const routes = [...router.getRoutes()] // 获取路由列表
const menu = ref(
  // 创建一个响应式变量menu，用于存储过滤后的路由列表
  routes.filter((item) => {
    const isTabbar = !item.meta.hidden // 判断是否为tabbar
    if (isTabbar) {
      item.label = item.meta.title // 设置tabbar的label和value
      item.value = item.name
    }
    return isTabbar
  })
)

// eslint-disable-next-line vue/require-prop-types
const model = defineModel({ required: true })
watch(model, (val) => {
  const { path = '' } = menu.value.find((item) => item.name === val) // 根据选中的tabbar，找到对应的路由路径
  path && router.currentRoute.value.path !== path && router.push(path) // 如果路径存在，并且当前路由路径不等于选中的tabbar路径，则跳转到选中的tabbar路径
})

router.afterEach((to) => {
  if (!to.meta.hidden) {
    model.value = to.name // 如果路由的meta属性中hidden为false，则将路由的name赋值给model
  }
})
</script>

<template>
  <div
    class="h-full flex flex-col justify-between"
    style="background-color: var(--el-color-info-light-9)"
  >
    <!-- logo -->
    <!-- <div class="my-2">
            <el-avatar shape="square" :size="40" :src="icon" />
          </div> -->
    <!-- tabbar -->
    <div class="app-tabbar overflow-hidden">
      <el-segmented v-model="model" :options="menu" direction="vertical" size="small" block>
        <template #default="{ item: { meta } }">
          <div class="flex items-center flex-col p-1 gap-y-1">
            <el-icon size="20">
              <component :is="meta.icon" />
            </el-icon>
            <div class="text-xs">{{ meta.title }}</div>
          </div>
        </template>
      </el-segmented>
    </div>
    <slot></slot>
  </div>
</template>
